<!-- 慕课专题头部-->
<template>
    <div class="detail-header-wrapper">
        <div class="info-left">
            <LazyImage v-if="detail.picUrl" :src="detail.picUrl" class-name="logo-img" />
            <img v-else src="~@/assets/img/topic/topic-default-cover@2x.png" class="logo-img" />
            <span v-if="detail.typeName" class="topic-classify">{{ detail.typeName }}</span>
        </div>
        <div class="info-right" v-if="detail.id">
            <div class="info-right-top space-between">
                <div class="course-name">
                    <Ellipsis :content="detail.name"/>
                </div>
                <el-button class="srt-el-button srt-el-button-h28 edit-btn" v-if="isCreater" @click="emit('manage-topic')">编辑</el-button>
            </div>
            <div class="flex-start mar-t4">
                <span class="label-text">发布人：</span>{{detail?.userInfoVO?.userName ? detail.userInfoVO.userName : '-'}}
                <el-divider class="divider-line" direction="vertical"></el-divider>
                <span class="label-text">起止时间：</span>{{detail.startTime ? dayjs(detail.startTime).format('YYYY.MM.DD HH:mm') : ''}} 至 {{detail.endTime ? dayjs(detail.endTime).format('YYYY.MM.DD HH:mm') : ''}}
                <img class="topic-status-img" :src="require(`@/assets/img/topic/${topicStatusImg}.png`)" alt="">
            </div>
            <div class="flex-start mar-t4">
                <span class="label-text">适用学段学科：</span>
                <span class="w254">
                    <Ellipsis class="w254" :content="handleStageSubject(detail.stageSubjectGradeList)" :line-height="22"/>
                </span>
            </div>
            <div v-if="taskRule" class="flex-start mar-t4">
                <span class="label-text">完成规则：</span>{{ taskRule }}
            </div>
            <div class="bottom-content">
                <!-- 已报名 -->
                <div v-if="isBuyPerson" class="study-progress-box">
                    <span v-if="taskUserProgress.requiredCount" style="margin-right: 42px;">
                        <span class="label-text">必修学习进度：</span><strong><span class="big-green-color">{{ taskUserProgress.requiredCompleteCount }}</span><span class="green-color">/</span>{{ taskUserProgress.requiredCount }}</strong>
                    </span>
                    <template v-if="detail.taskRequirement">
                        <span class="label-text">选修学习进度：</span><strong><span class="big-green-color">{{ taskUserProgress.notRequiredCompleteCount }}</span><span class="green-color">/</span>{{ detail.taskRequirement }}</strong>
                    </template>
                </div>
                <div class="join-box" v-else>
                    <!-- topicStatus == 3,课程已结束 -->
                    <el-button class="join-btn" :disabled="detail.topicStatus === 3" @click="emit('obtain-topic')" >报名学习</el-button>
                    <span class="label-text" v-if="detail.topicStatus === 3" style="margin-left: 10px;">专题考核有效期已结束，以下慕课可自行学习，但不计入学习进度</span>
                </div>
                <div class="flex-start" v-if="sourceInfo.courseName">
                    <span class="label-text">来源：</span>
                    <span class="source-wrap" @click="goCourse"><Ellipsis :content="sourceInfo.courseName" :line-height="22"/></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import LazyImage from '@/components/lazy-image/lazy-image.vue';
import Ellipsis from '@/components/ellipsis.vue';
import { handleStageSubject } from '@/lib/biz-tools.js';
import { computed } from 'vue';
import dayjs from 'dayjs';
import { jumpHref } from '@/router/jumpHref';

const emit = defineEmits(['obtain-topic', 'manage-topic']);

const props = defineProps({
    detail: {
        type: Object,
        default: () => {
            return {};
        }
    },
    sourceInfo: {
        type: Object,
        default: () => {
            return {};
        } 
    },
    isBuyPerson: { // 是否加入该专题
        type: Boolean,
        default: false
    },
    isCreater: { // 是否是创建人
        type: Boolean,
        default: false
    }
});

const topicStatusImg = computed(() => {
    const img = {
        1: 'doing@2x', // 进行中
        2: 'not-start@2x' // 未开始
    }[props.detail.topicStatus] || 'done@2x'; // 已结束
    return img;
});

const taskUserProgress = computed(() => props.detail.taskUserProgress || {}); // 当前用户完成进度
const taskRule = computed(() => { // 完成规则
    const requiredCount = taskUserProgress.value.requiredCount || 0;
    const electiveCount = props.detail.taskRequirement || 0;
    let msg = requiredCount > 0 ? `${requiredCount}门必修类课程` : '';
    msg += requiredCount > 0 && electiveCount > 0 ? '，' : '';
    msg += electiveCount > 0 ? `${electiveCount}门选修类课程` : '';
    return msg ? `完成以下${msg}。` : '';
});

// 跳转研修课程
function goCourse () {
    G_go(jumpHref.course.detail(props.sourceInfo.courseId));
}
</script>

<style lang="scss" scoped>
.detail-header-wrapper {
    color: var(--srt-main-text-color);
    padding: 20px;
    border-radius: 4px;
    box-sizing: border-box;
    width: 1200px;
    display: flex;
    position: relative;
    text-align: left;
    background-color: #ffffff;
    .space-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .flex-start {
        display: flex;
        align-items: center;
    }
    .info-left {
        position: relative;
        width: 450px;
        height: 250px;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 20px;
        .logo-img {
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .topic-classify {
            position: absolute;
            left: 0;
            top: 0;
            background: #00B042;
            border-radius: 4px 0 4px 0;
            color: #ffffff;
            line-height: 22px;
            padding: 1px 6px;
        }
    }

    .info-right {
        position: relative;
        flex: calc(100% - 470px) 0 0;
        width: calc(100% - 470px);
        font-size: 14px;
        color: #222222;
        line-height: 22px;
        font-family: MicrosoftYaHei;
        .info-right-top {
            position: relative;
            margin-top: 10px;
            .edit-btn {
                position: absolute;
                right: 0;
                top: -10px;
                width: 48px;
            }
        }
        .course-name {
            width: 580px;
            flex: 580px 0 0;
            font-size: 18px;
            line-height: 28px;
            text-align: left;
            font-weight: bold;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        }
        .label-text {
            color: #666666;
        }
        .source-item {
            margin-top: 12px;
        }
        .topic-status-img {
            width: 46px;
            height: 16px;
            margin-left: 8px;
        }
        .divider-line {
            border-left: 1px solid #e0e2e4;
            margin: 0 14px;
        }
        .mar-t4 {
            margin-top: 4px;
        }
        .w179 {
            display: inline-block;
            max-width: 179px;
        }
        .w254 {
            display: inline-block;
            max-width: 254px;
        }
        .big-green-color {
            font-size: 18px;
            color: #00B042;
        }
        .green-color {
            color: #00B042;
        }
        .bottom-content {
            position: absolute;
            left: 0;
            bottom: 0;
            .join-btn {
                height: 36px;
                line-height: 36px;
                background: #0084F6;
                border-radius: 4px;
                padding: 0 20px;
                color: #FFFFFF;
                border-color: #0084F6;
                &.is-disabled {
                    background-color: #eff0f2;
                    border-color: #eff0f2;
                    color: #999;
                }
                &:hover {
                    background-color: #0176f6;
                    border-color: #0176f6;
                }
            }
        }
        .study-progress-box {
            margin-bottom: 22px;
        }
        .join-box {
            margin-bottom: 12px;
        }
        .source-wrap {
            cursor: pointer;
            text-decoration: underline;
            max-width: 500px;
        }
    }
}
</style>
